<template>
    <div>
        <!-- 1.0 顶部导航栏 -->
        <van-nav-bar  title="首页" />

        <!-- 2.0 轮播组件 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <!-- <van-swipe-item>
                <img src="http://m.itheima.com/images/slidead/mobile/20220323133842%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B%E5%8D%87%E7%BA%A7.jpg" alt="">
            </van-swipe-item> -->
            <van-swipe-item v-for="item in imgs" :key="item.img">
                <a :href="item.url">
                    <img :src="item.img" alt="">
            </a>
            </van-swipe-item>
        </van-swipe>

        <!-- 3.0 新闻滚动通告栏 -->
        <!-- <van-notice-bar left-icon="volume-o">
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="5000"
                :show-indicators="false"
            >
                <van-swipe-item>内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1</van-swipe-item>
                <van-swipe-item>内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2内容 2</van-swipe-item>
                <van-swipe-item>内容 3</van-swipe-item>
            </van-swipe>
       </van-notice-bar> -->
       <a :href="url">
        <van-notice-bar
                left-icon="volume-o"
                :text="title"
                scrollable="true"
                @replay="replay"
                />
        </a>

        <!-- 实现宫格 -->
        <div class="grid">
        <van-row>
            <van-col span="8">
                <router-link to="/News">
                <img src="../assets/menu3.png" alt="">
            </router-link>
            </van-col>
            <van-col span="8">
                <router-link to="/Image">
                 <img src="../assets/menu4.png" alt="">
                </router-link>
            </van-col>
            <van-col span="8">
                <img src="../assets/menu5.png" alt="">
            </van-col>
        </van-row>
        <van-row>
            <van-col span="8">
                <img src="../assets/menu6.png" alt="">
            </van-col>
            <van-col span="8">
                <img src="../assets/menu9.png" alt="">
            </van-col>
            <van-col span="8">
                <img src="../assets/menu10.png" alt="">
            </van-col>
        </van-row>
    </div>
    </div>
</template>

<script>
let index = 0;
export default{
    data(){
        return {
            imgs:[],
            news:[],
            url:'http://www.baidu.com',
            title:'测试'
        }
    },
    methods:{
        getLunbo(){
            // 使用axios请求服务器获取到轮播图的数据
            this.$http.get('http://210.21.98.31:6007/api/getlunbo')
            .then(res=>{
                // 将服务器的轮播数据赋值给 imgs数组，当imgs数组发生改变，就会自动触发页面的重新渲染，从而有新数据呈现
                this.imgs = res.data.message
            })
        },
        getNewsList(){
            // 获取到所有的新闻数据
            this.$http.get('http://210.21.98.31:6007/api/getnewslist')
            .then(res=>{
                this.news = res.data.message;

                this.title = res.data.message[0].title;
                this.url =  res.data.message[0].link_url;
            })
        },
        replay(){
            // 当同一条数据在下一次进行轮播的时候，就要更换一条新数据
            // console.log(11111);
            index++;
            // 判断如果index值>=数组长度，则重置为0
            if(index >= this.news.length){
                index = 0;
            }

            // 获取到this.news数组中的index位置的数据
            this.title =this.news[index].title;
            this.url = this.news[index].link_url;
        }
    },
    mounted(){
        // 表示页面加载完成调用getLunbo方法
        this.getLunbo();
        this.getNewsList();
    }
}
</script>

<style scoped>
/* 轮播图样式设置 */
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 200px;
        height: 200px;
        text-align: center;
        background-color: #39a9ed;
    }

    .my-swipe img{
        height: 200px;
        width: 100%;
    }


    /* 通告栏样式设置 */
    .notice-swipe {
    height: 40px;
    line-height: 40px;
  }

  .grid img{
    height: 95px;
    width: 95px;
  }
</style>